// 头部顶部导航条
.header_top_navigation {
  height: 40px;
  background-color: #333333;
  font-size: 12px;
  color: #b0b0b0;
  position: relative;
  // 顶部导航栏之间的span
  .spa {
    float: left;
    width: 2px;
    color: #4b4b4b;
    line-height: 40px;
    margin: 0 0.3em;
  }
  // 左边的导航栏
  .top_navigation_left {
    float: left;
    a {
      float: left;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      color: #b0b0b0;
      &:hover {
        color: #ffffff;
      }
    }
  }
}
// 下载图标
.download {
  position: absolute;
  background: #ffff;
  width: 124px;
  height: 0;
  top: 40px;
  right: 50%;
  margin-left: -55px;
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 1;
  box-shadow: 0 1px 5px #aaa;
  overflow: hidden;
  transition: height 0.3s;
  z-index: 100;
  img {
    width: 90px;
    height: 90px;
    display: block;
    margin: 18px auto 12px;
  }
}
.download-a:hover + .download {
  height: 148px;
}
// 顶部导航栏购物车
.top_navigation_shop {
  position: relative;
  float: right;
  margin-left: 15px;
  a {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #b0b0b0;
  }
  .shop_cart {
    display: block;
    width: 120px;
    height: 40px;
    background-color: #424242;
    line-height: 40px;
    color: #b0b0b0;
    text-align: center;
    // 里面的icon图标
    .iconfont {
      font-size: 20px;
      margin-right: 5px;
    }
    &:hover {
      color: #f40;
      background-color: #fff;
    }
  }
  .shopping_hint {
    position: absolute;
    top: 40px;
    right: 0;
    height: 0px;
    text-align: center;
    width: 316px;
    line-height: 100px;
    font-size: 14px;
    box-shadow: 0 1px 5px #aaa;
    overflow: hidden;
    transition: all 0.3s;
    background-color: #fff;
    z-index: 31;
  }
}
// 鼠标划过购物车的效果
.shop_cart:hover + .shopping_hint {
  height: 100px;
}
// 头部顶部登录注册信息
.top_navigation_news {
  float: right;
  font-size: 14px;
  width: 148px;
  .header_news {
    padding: 0 10px;
  }
  a {
    display: block;
    height: 40px;
    color: #b0b0b0;
    line-height: 40px;
    float: left;
    padding: 0 5px;
    font-size: 12px;
    &:hover {
      color: #fff;
    }
  }
}
//菜单栏
.menu_bar {
  position: relative;
  height: 100px;
  z-index: 20;
}
// logo
.menu_bar_logo {
  float: left;
  width: 62px;
  margin-top: 22px;
  .bar_logo {
    position: relative;
    display: block;
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    overflow: hidden;
    .mi_logo {
      position: absolute;
      left: 0;
      top: 0;
      width: 55px;
      height: 55px;
      display: block;
      background: url(../images/index/mi-logo.png) no-repeat 50% 50%;
    }
    .mi_home {
      position: absolute;
      left: -55px;
      top: 0;
      width: 55px;
      height: 55px;
      display: block;
      background: url(../images/index/mi-home.png) no-repeat 50% 50%;
    }
  }
}

// 一级菜单栏
.fist_menu_bar {
  height: 75px;
  float: left;
  > ul {
    z-index: 10;
    float: left;
    width: 1100px;
    height: 88px;
    margin: 0;
    padding: 12px 0 0 30px;
    list-style-type: none;
    font-size: 16px;
    > li {
      float: left;
      font-size: 16px;
      .link_blak {
        display: block;
        padding: 26px 0 38px;
        text-align: right;
        color: #333;
        opacity:1;
        overflow: visible;
      }
      .link {
        display: block;
        padding: 26px 10px 38px;
        *padding: 26px 8px 38px;
        color: #333;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
      }
      .text {
        font-size: 16px;
        &:hover {
          color: #ff6700;
        }
      }
    }
  }
  .menu_bar_goods {
    position: relative;
    float: left;
    width: 127px;
    padding-right: 15px;
    .goods_twoMenuBar {
      position: absolute;
      top: 88px;
      left: -92px;
      z-index: 21;
      width: 234px;
      height: 460px;
      font-size: 14px;
      display: none;
      ul {      
        height: 420px;
        border: 0;
        color: #fff;
        background: rgba(59, 58, 58, 0.6);
        margin: 0;
        padding: 20px 0;
        li {
          &:hover {
            background-color: #ff6700;
          }
          > a {
            position: relative;
            display: block;
            padding-left: 30px;
            height: 42px;
            line-height: 42px;
            color: #e0e0e0;
            > em {
              position: absolute;
              top: 12px;
              right: 20px;
              font-size: 16px;
              line-height: 16px;
              color: #e0e0e0;
            }
          }
        }
      }
    }
  }
  // 二级菜单
  .bar_0_MenuBar,
  .bar_1_MenuBar {
    position: absolute;
    display: none;
    z-index: 30;
    left: 0;
    top: 100px;
    width: 100%;
    height: 0;
    overflow: hidden;
    box-shadow: -6px 3px 6px #888888;
    background: rgb(255, 255, 255);
    text-align: center;
    transition: all 0.5s linear;
    > .container {
      > ul {
        padding-top: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        > li {
          width: 204px;
          &:last-child {
            > a {
              div {
                border-right: none;
              }
            }
          }
          > a {
            width: 300px;
            div {
              border-right: 1px solid #cccccc;
            }
            em {
              display: block;
              color: #4b4b4b;
              line-height: 30px;
              font-size: 12px;
            }
            .price {
              color: #ff6700;
            }
          }
        }
      }
    }
  }
}
.bar_0 {
  &:hover {
    .bar_0_MenuBar {
      height: 220px;
      display: block;
    }
  }
}
.bar_1 {
  &:hover {
    .bar_1_MenuBar {
      height: 220px;
      display: block;
    }
  }
}
// 搜索框
.search-box {
  position: relative;
  bottom: 77px;
  float: right;
  width: 296px;
  margin-top: 25px;
  .search-box-form {
    width: 296px;
    z-index: 20;
    .searchBoxForm1 {
      right: 51px;
      z-index: 2;
      width: 223px;
      height: 48px;
      padding: 0 10px;
      font-size: 14px;
      line-height: 48px;
    }
    input {
      position: absolute;
      top: 0;
      border: 1px solid #e0e0e0;
      outline: 0;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      &:last-child {
        right: 0;
        z-index: 5;
        width: 52px;
        height: 50px;
        font-size: 24px;
        line-height: 24px;
        background: #fff;
        color: #616161;
        &:hover {
          background-color: #ff6700;
          cursor: pointer;
          color: #fff;
        }
      }
    }
  }
  /* 搜索框下的列表框 */
  .search-box-listbox {
    position: absolute;
    left: 0;
    top: 50px;
    _top: 51px;
    z-index: 20;
    width: 243px;
    border: 1px solid #ff6700;
    border-top: 0;
    background: #fff;
    display: none;
    ul {
      li {
        a {
          position: relative;
          display: block;
          padding: 6px 15px;
          font-size: 12px;
          color: #424242;
        }
      }
    }
  }
}
